<template>
  <view class="modal">
    <view class="modal-mask" @click="handleCancel"></view>
    <view class="modal-content">
      <input 
        class="modal-input" 
        type="text" 
        placeholder="请输入个人访问令牌"
        v-model="tokenValue"
      />
      <!-- <view class="help-link">
        <text @click="handleHelp">如何获取访问令牌?</text>
      </view> -->
      <view class="modal-buttons">
        <button class="btn cancel-btn" @click="handleCancel">取消</button>
        <button class="btn confirm-btn" @click="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import {userApi} from '../utils/api'
const props = defineProps({
  show: Boolean,
  tokenValue:String
})

const emit = defineEmits(['update:show', 'confirm', 'cancel'])

const tokenValue = ref('')

const handleCancel = () => {
  emit('cancel')
}

const handleConfirm = () => {
  emit('confirm', tokenValue.value)
}

const handleHelp = () => {
	emit('handleHelp')
}
// onMounted(()=>{
// 	tokenValue.value = uni.getStorageSync('userInfo')['coze_access_token']
// })
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  background: #fff;
  border-radius: 30rpx;
  padding: 40rpx 30rpx;
}

.modal-input {
  width: 100%;
  height: 100rpx;
  background: #f8f8f8;
  border: none;
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  box-sizing: border-box;
}

.help-link {
  text-align: right;
  margin: 20rpx 0 40rpx;
}

.help-link text {
  color: #00C853;
  font-size: 26rpx;
  text-decoration: underline;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.btn {
  flex: 1;
  height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  text-align: center;
  border: none;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #00C853;
  color: #fff;
}

/* 去除按钮默认样式 */
button {
  padding: 0;
  margin: 0;
}

button::after {
  border: none;
}
</style> 